<template>
  <div class="patrolTypes-root">
    <formTitleVue
      title="巡查类型统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRing domId="patrol-patrolTypes-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPieRing from '@/components/Echarts/myPieRing.vue';
import { time_select_optios } from '@/utils/global.js';
import { patrolTypeStatistics,
         patrolTypeStatisticsNew} from '@/api/risk/patrol'

export default {
  name: "patrolTypes",
  components: {
    formTitleVue,myPieRing,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "累计", value: "累计" },
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ]
        }
      ],
      chartsData: {
        xData: ["市政设施", "房屋建筑", "交通设施", "人员密集区域"],
        yData: [],
      },
      echartsOption:{
        legend:{
          show:false,
        }
      },
      searChForm: {
        startTime: '',
        endTime: '',
      },
    };
  },
  methods: {
    selectChange(item) {
      this.searChForm.startTime = ""
      this.searChForm.endTime = ""
      // console.log(item);
      if(item!="累计"){
        this.searChForm.startTime = time_select_optios[item].startTime
        this.searChForm.endTime = time_select_optios[item].endTime
      }
      this.getData()
    },
    getData(){
      console.log(this.searChForm)
      let params = {
          ...this.searChForm,
         areaCode: this.$store.state.account.user.deptIds
      }
      patrolTypeStatisticsNew(params).then(res=>{
      // patrolTypeStatistics(params).then(res=>{
          if(res.code ==200){
            this.chartsData.yData = [
              {
                name:"巡查类型",
                data: res.data.report
              }
            ]
            this.chartsData.yData.forEach(item => {
              item.data.forEach(item => {
                item.label = {
                  normal:{
                    show: true,
                    formatter: "{b} {d}%",
                  }
                }
              })
            })
          }
      })
      // this.chartsData.yData = [
      //   {
      //     name:"风险等级分布",
      //     data: [
      //       {value: 12, name: '突发型',},
      //       {value: 16, name: '计划型'},
      //       {value: 20, name: '应急型'},
      //       {value: 32, name: '临时型'},
      //       {value: 18, name: '其他类型'},
      //     ]
      //   }
      // ]
      // this.chartsData.yData.forEach(item => {
      //   item.data.forEach(item => {
      //     item.label = {
      //       normal:{
      //         show: true,
      //         formatter: "{b} {d}%",
      //       }
      //     }
      //   })
      // })
    },
  },
  mounted() {
    this.selectChange(this.selectOptions[0].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.patrolTypes-root {
  #echarts-types {
    height: 30vh;
  }
}
</style>
